<template>
    <template v-for="(item, index) in columns" :key="index">
        <el-table-column :prop="item.name" :label="item.label" :sortable="item.sortable" :width="item.width" :min-width="item.minWidth"
                         :fixed="item.fixed || undefined" :show-overflow-tooltip="item.showOverflowTooltip === undefined || item.showOverflowTooltip">
            <template #default="{row}">
                <div v-if="item.html" v-html="item.render ? item.render(row) : row[item.name]" />
                <el-link v-else-if="item.linkable" :underline="false" @click="item.click(row)">{{item.render ? item.render(row) : row[item.name] }}</el-link>
                <pre v-else-if="item.pre">{{item.render ? item.render(row) : row[item.name] }}</pre>
                <img v-else-if="item.img" :src="item.render ? item.render(row) : row[item.name]" :alt="item.label" />
                <span v-else>{{item.render ? item.render(row) : row[item.name] }}</span>
            </template>
        </el-table-column>
    </template>
</template>


<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'ElTableColumns',
    props: {
        columns: {
            type: Array,
            default: () => []
        }
    },
    setup() {
        return {};
    }
})
</script>